<template>
  <view class="mine-page">
    <!-- 顶部背景装饰 -->
    <view class="top-bg">
      <view class="bg-decoration"></view>
    </view>

    <!-- 用户信息区域 -->
    <view class="user-section">
      <view v-if="isLoggedIn" class="user-info-logged">
        <!-- 已登录状态 -->
        <view class="user-avatar">
          <u-avatar :src="userInfo.avatar" :size="60" shape="circle" @click="handleAvatarClick"></u-avatar>
          <view class="avatar-badge">
            <u-icon name="checkmark-circle-fill" color="#19be6b" size="12"></u-icon>
          </view>
        </view>
        <view class="user-details">
          <text class="user-name">{{ userInfo.nickname }}</text>
          <text class="user-desc">{{ userInfo.desc || '这个人很懒，什么都没留下' }}</text>
        </view>
        <view class="user-stats">
          <view class="stat-item">
            <text class="stat-number">{{ userInfo.points || 0 }}</text>
            <text class="stat-label">积分</text>
          </view>
          <view class="stat-divider"></view>
          <view class="stat-item">
            <text class="stat-number">{{ userInfo.level || 1 }}</text>
            <text class="stat-label">等级</text>
          </view>
        </view>
      </view>

      <view v-else class="user-info-guest">
        <!-- 未登录状态 -->
        <view class="guest-avatar">
          <u-avatar :src="defaultAvatar" :size="60" shape="circle"></u-avatar>
        </view>
        <view class="guest-info">
          <text class="guest-title">登录享受更多服务</text>
          <text class="guest-desc">登录后可以同步数据，享受个性化体验</text>
        </view>
        <u-button type="primary" shape="round" :custom-style="loginButtonStyle" @click="handleLogin">
          立即登录
        </u-button>
      </view>
    </view>

    <!-- 功能菜单区域 -->
    <view class="menu-section">
      <!-- 我的服务 -->
      <view class="menu-group">
        <view class="group-title">
          <u-icon name="grid" color="#5677fc" size="16"></u-icon>
          <text>我的服务</text>
        </view>
        <view class="menu-grid">
          <view v-for="item in serviceMenus" :key="item.id" class="menu-item" @click="handleMenuClick(item)">
            <view class="menu-icon" :style="{ backgroundColor: item.bgColor }">
              <u-icon :name="item.icon" color="#fff" size="20"></u-icon>
            </view>
            <text class="menu-text">{{ item.title }}</text>
            <view v-if="item.badge" class="menu-badge">{{ item.badge }}</view>
          </view>
        </view>
      </view>

      <!-- 工具与设置 -->
      <view class="menu-group">
        <view class="group-title">
          <u-icon name="setting" color="#ff6b35" size="16"></u-icon>
          <text>工具与设置</text>
        </view>
        <view class="menu-list">
          <u-cell-group :border="false">
            <u-cell v-for="item in settingMenus" :key="item.id" :title="item.title" :value="item.value" :isLink="true"
              :border="false" :titleStyle="{ fontWeight: '500' }" @click="handleMenuClick(item)">
              <template #icon>
                <view class="cell-icon" :style="{ backgroundColor: item.bgColor }">
                  <u-icon :name="item.icon" color="#fff" size="14"></u-icon>
                </view>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer-section">
      <view class="version-info">
        <text class="version-text">版本 v{{ version }}</text>
        <text class="company-text">© 2024 Your Company</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useClipboard, usePermission } from '@/hooks';

// 用户信息接口定义
interface UserInfo {
  id: string
  nickname: string
  avatar: string
  desc?: string
  points?: number
  level?: number
}

// 菜单项接口定义
interface MenuItem {
  id: string
  title: string
  icon: string
  bgColor: string
  badge?: string
  value?: string
  path?: string
}

// 响应式数据
const isLoggedIn = ref(false) // 模拟登录状态，实际项目中应该从store或者token判断
const version = ref('1.0.0')

// 用户信息
const userInfo = ref<UserInfo>({
  id: '123456',
  nickname: '张三',
  avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
  desc: '生活就像一盒巧克力',
  points: 2580,
  level: 5
})

// 默认头像
const defaultAvatar = 'https://cdn.uviewui.com/uview/album/1.jpg'

// 登录按钮样式
const loginButtonStyle = {
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  border: 'none',
  height: '44px',
  fontSize: '16px'
}

// 服务菜单数据
const serviceMenus = ref<MenuItem[]>([
  { id: '1', title: '我的订单', icon: 'file-text', bgColor: '#5677fc', badge: '3' },
  { id: '2', title: '我的收藏', icon: 'heart', bgColor: '#ff6b6b' },
  { id: '3', title: '我的积分', icon: 'star', bgColor: '#ffa726' },
  { id: '4', title: '我的优惠券', icon: 'coupon', bgColor: '#26a69a', badge: 'new' },
  { id: '5', title: '我的地址', icon: 'map', bgColor: '#ab47bc' },
  { id: '6', title: '邀请好友', icon: 'plus-people-fill', bgColor: '#ef5350' },
  { id: '7', title: '我的钱包', icon: 'zhifubao', bgColor: '#42a5f5' },
  { id: '8', title: '更多服务', icon: 'kefu-ermai', bgColor: '#78909c' }
])

// 设置菜单数据
const settingMenus = ref<MenuItem[]>([
  { id: '10', title: '消息通知', icon: 'bell', bgColor: '#ff9800', value: '已开启' },
  { id: '11', title: '隐私设置', icon: 'lock', bgColor: '#607d8b' },
  { id: '12', title: '清除缓存', icon: 'trash', bgColor: '#9c27b0', value: '15.2MB' },
  { id: '13', title: '意见反馈', icon: 'kefu-ermai', bgColor: '#2196f3' },
  { id: '14', title: '关于我们', icon: 'share-square', bgColor: '#4caf50' },
  { id: '15', title: '设置', icon: 'setting', bgColor: '#795548' }
])

// 处理头像点击
const handleAvatarClick = () => {
  uni.showToast({
    title: '点击头像',
    icon: 'none'
  })
}

// 处理登录
const handleLogin = () => {
  // router.push({ path: '/pagesA/login/index', query: { from: 'user' } })
  uni.navigateTo({
    url: '/pages/common/login/index',
  })
}

// 处理菜单点击
const handleMenuClick = (item: MenuItem) => {
  if (!isLoggedIn.value && ['1', '2', '3', '4', '5', '6'].includes(item.id)) {
    uni.showToast({
      title: '请先登录',
      icon: 'none'
    })
    return
  }

  uni.showToast({
    title: `点击了${item.title}`,
    icon: 'none'
  })

  // 这里可以添加路由跳转逻辑
  // uni.navigateTo({
  //   url: item.path || '/pages/common/common'
  // })
}
// 登录鉴权，微信小程序端点击tabbar的底层逻辑不触发uni.switchTab，需要在页面onShow生命周期中校验权限
onShow(async () => {
  const hasPermission = await usePermission();
  console.log('hasPermission', hasPermission);
});
</script>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 50%);
  overflow: hidden;

  .top-bg {
    position: relative;
    height: 130px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0 0 20px 20px;

    .bg-decoration {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 100px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      transform: translate(30px, -30px);
    }
  }

  .user-section {
    position: relative;
    margin-top: -100px;
    padding: 0 20px;
    z-index: 10;

    .user-info-logged {
      background: #fff;
      border-radius: 12px;
      padding: 20px 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      text-align: center;

      .user-avatar {
        position: relative;
        display: inline-block;
        margin-bottom: 12px;

        .avatar-badge {
          position: absolute;
          right: 0;
          bottom: 4px;
          width: 20px;
          height: 20px;
          background: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
        }
      }

      .user-details {
        margin-bottom: 16px;

        .user-name {
          display: block;
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .user-desc {
          display: block;
          font-size: 13px;
          color: #999;
        }
      }

      .user-stats {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;

        .stat-item {
          text-align: center;

          .stat-number {
            display: block;
            font-size: 16px;
            font-weight: 600;
            color: #667eea;
            margin-bottom: 2px;
          }

          .stat-label {
            display: block;
            font-size: 12px;
            color: #999;
          }
        }

        .stat-divider {
          width: 1px;
          height: 20px;
          background: #eee;
        }
      }
    }

    .user-info-guest {
      background: #fff;
      border-radius: 12px;
      padding: 20px 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      text-align: center;

      .guest-avatar {
        margin-bottom: 12px;
        opacity: 0.7;
      }

      .guest-info {
        margin-bottom: 16px;

        .guest-title {
          display: block;
          font-size: 16px;
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .guest-desc {
          display: block;
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .menu-section {
    padding: 20px;

    .menu-group {
      margin-bottom: 20px;

      .group-title {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 12px;
        font-size: 15px;
        font-weight: 600;
        color: #333;
      }

      .menu-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        background: #fff;
        border-radius: 10px;
        padding: 16px 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

        .menu-item {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;

          .menu-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
          }

          .menu-text {
            font-size: 12px;
            color: #333;
            text-align: center;
          }

          .menu-badge {
            position: absolute;
            top: -4px;
            right: 4px;
            background: #ff4757;
            color: #fff;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 6px;
            min-width: 16px;
            text-align: center;
          }
        }
      }

      .menu-list {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);

        :deep(.u-cell) {
          padding: 16px 12px !important;

          .u-cell__body {
            padding: 0 !important;
          }

          .u-cell__title {
            font-size: 14px !important;
          }

          .u-cell__value {
            font-size: 13px !important;
          }
        }

        .cell-icon {
          width: 20px;
          height: 20px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
        }
      }
    }
  }

  .footer-section {
    padding: 20px;
    text-align: center;

    .version-info {
      .version-text {
        display: block;
        font-size: 12px;
        color: #999;
        margin-bottom: 4px;
      }

      .company-text {
        display: block;
        font-size: 11px;
        color: #ccc;
      }
    }
  }
}
</style>
